@import "../../define/global";

.home-theme-popup {
  -fx-pref-height: 150px;
  -fx-pref-width: 320px;
  -fx-alignment: center;
  -fx-padding: 0 10px 0 10px;
  -fx-spacing: 25px;


  .theme-popup-color-box {
    -fx-spacing: 10px;
    -fx-alignment: center;

    .color-box-item {
      -fx-pref-width: 38px;
      -fx-pref-height: 38px;
      -fx-background-radius: 5px;
      -fx-border-radius: 5px;
      -fx-text-fill: white;
      -fx-font-size: 11px;
      -fx-content-display: GRAPHIC_ONLY;
      @include shadow-br-3(derive(-fx-base, -100%));

      &.current {
        -fx-icon: "checked";

        .icon {
          -fx-icon-size: 14px;
          -fx-text-fill: #e3d9d9;
        }
      }

      &:hover {
        @include shadow-br-1(derive(-fx-base, -100%));
      }

      &.default {
        -fx-background-color: #3b4252;
      }

      &.dark {
        -fx-background-color: rgb(43, 43, 43);
      }

      &.green {
        -fx-background-color: rgb(77, 175, 124);
      }

      &.red {
        -fx-background-color: rgb(214, 69, 65);
      }

      &.blue {
        -fx-background-color: rgb(52, 152, 219);
      }

      &.pink {
        -fx-background-color: rgb(214, 130, 141);
      }

      &.purple {
        -fx-background-color: rgb(155, 89, 182);
      }

      &.deep-blue {
        -fx-background-color: rgb(79, 98, 208);
      }

      &.light-blue {
        -fx-background-color: rgb(57, 175, 234);
      }

      &.teal {
        -fx-background-color: rgb(51, 110, 123);
      }

      &.orange {
        -fx-background-color: rgb(255, 143, 87);
      }

      &.grey {
        -fx-background-color: rgb(108, 122, 137);
      }
    }

    .color-box-item-custom {
      @extend .color-box-item;
      -fx-color-label-visible: false;

      .color-label {
        -fx-background-radius: 5px;
        -fx-border-radius: 5px;
      }
    }

  }
}
